<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        * {
            padding: 0;
            margin: 0;
            /* 内外边框不占盒子 */
            box-sizing: border-box;
        }

        .container{
            width: 800px;
            /* 设置页面垂直外边距 + 水平居中*/
            margin: 10px auto;
        }
        
        .container h2 {
            text-align: center;
            margin:30px 0px;
        }

        .row {
            /* 设置成弹性布局成为块级元素,从而设置属性 */
            height: 50px;
            display: flex;
            justify-content: center;
            margin-top:5px ;
        }

        .row span {
            height: 50px;
            width: 100px;
            line-height: 50px;
        }

        .row input {
            height: 50px;
            width: 300px;
            line-height: 50px;
        }

        .row button {
            height: 50px;
            width: 400px;
            background-color: gray;
            border:none;
            border-radius:10px;
        }

        .row button:active {
            background-color:aqua;
        }
    </style>
</head>
<body>
        <div class="container">
            <h2>表白墙</h2>

            <div class="row">
                <span>谁</span>
                <input type="text" id="one">
            </div>
            
            <div class="row">
                <span>对谁</span>
                <input type="text" id="two">
            </div>
            
            <div class="row">
                <span>说什么</span>
                <input type="text" id="three">
            </div>

            <div class="row">
                <button>提交</button>
            </div>
            
        </div>

        <script>
            let container = document.querySelector('.container');
            let button = document.querySelector('button');
            let one = document.querySelector('#one');
            let two = document.querySelector('#two');
            let three = document.querySelector('#three');


            button.onclick = function() {
            //获取输入框里的值
            let oneValue = one.value;
            let twoValue = two.value;
            let threeValue = three.value;
            
            //输入框为空时都返回.
            if(oneValue =='' || twoValue == '' || threeValue == '') {
                return;
            }

            //创建一个新标签,添加到父标签的末尾
            let vidName = document.createElement('div');
            vidName.className = 'row';
            vidName.innerHTML = oneValue + '对' + twoValue + '说:' + threeValue;
            
            //挂在DOM树上,不然页面不显示
            container.appendChild(vidName);

            //清空输入框
            one.value = '';
            two.value = '';
            three.value = '';
        }

        </script>
</body>
</html>